<% record = (status == :active) ? sharing_service : record %>
<%= render Settings::ExpandableComponent.new class: "mb-4", data: {capsule: "true"} do |expandable| %>
  <% expandable.description do %>
    <%= render Settings::ControlRowComponent.new do |row| %>
      <% row.icon do %>
        <%= render "icon", sharing_service: sharing_service %>
      <% end %>

      <% row.title { sharing_service.label } %>

      <% row.control do %>
        <% if status == :active %>
          <%= render partial: "supported_sharing_services/delete_supported_service", locals: {editable: true, sharing_service: sharing_service} %>
        <% else %>
          <%= button_tag 'Activate', class: 'button button-secondary', data: {action: "expandable#toggle"} %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>

  <% expandable.item do %>
    <div class="py-3 px-4">
      <p class="mb-4 text-500"><strong class="font-bold">How to activate:</strong> Add <em>kindle@feedbin.com</em> to your <a href="https://www.amazon.com/hz/mycd/myx#/home/settings/payment" target="_blank">Approved Personal Document E-mail List</a>. You can get your Kindle email address from the <a href="https://www.amazon.com/gp/digital/fiona/manage?&amp;#manageDevices" target="_blank">Manage your devices</a> page.</p>

      <%= form_for(record) do |f| %>
        <%= f.hidden_field :service_id, value: sharing_service.service_id %>
        <%= f.hidden_field :operation, value: "" %>

        <%= render Form::TextInputComponent.new do |text| %>
          <% text.label_content do %>
            <%= f.label :kindle_address, "Kindle Email Address" %>
          <% end %>
          <% text.input do %>
            <%= f.text_field :kindle_address, class: "peer text-input" %>
          <% end %>
        <% end %>

        <%= render Settings::ButtonRowComponent.new do %>
          <%= button_tag "Cancel", type: "button", class: "button button-tertiary", data: {action: "expandable#toggle"} %>
          <%= button_tag "Save", type: "submit", class: "button button-primary-plain" %>
        <% end %>
      <% end %>
    </div>
  <% end %>
<% end %>